<template>
	<div class="page-min">
		<el-card class="box-card">
			<el-button type="primary" @click="dialogFormVisible =true">新增</el-button>
			<div style="height: 10px;"></div>
			<el-table :data="tableData" border  max-height="600">
				<el-table-column label="序号" width="100">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column prop="level" label="等级" >
				</el-table-column>
				<el-table-column prop="coefficient" label="考核系数" >
				</el-table-column>
				<el-table-column prop="remark" label="备注" >
				</el-table-column>
				<el-table-column label="操作" width="300" fixed="right">
					<!-- <template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
						<el-button type="text" size="small" @click="editorClick(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
					</template> -->
					<template slot-scope="scope">
						<el-button size="mini"@click="handleClick(scope.row)">查看</el-button>
						<el-button size="mini" @click="editorClick(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="deleteClick(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="height: 10px;"></div>
			<!-- <el-pagination layout="prev, pager, next" :total="1000" :hide-on-single-page="valuePage">
			</el-pagination> -->
		</el-card>

		<!-- 新增 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="等级" :label-width="formLabelWidth" prop="level">
					<el-input v-model="form.level" autocomplete="off" :disabled="disabled"></el-input>
				</el-form-item>
				<el-form-item label="考核系数" :label-width="formLabelWidth" prop="coefficient">
					<el-input v-model="form.coefficient" autocomplete="off" :disabled="disabled"></el-input>
				</el-form-item>
				<el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
					<el-input v-model="form.remark" autocomplete="off" type="textarea" :rows="3" maxlength="100" :disabled="disabled">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submitForm('form',)">{{btnName}}</el-button>
			</div>
		</el-dialog>
		<!-- 查看 -->
		<el-dialog title="" :visible.sync="dialogFormVisibleHandle">
			<el-form :model="form" >
				<el-form-item label="等级" :label-width="formLabelWidth" prop="level">
					<el-input v-model="form.level" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="考核系数" :label-width="formLabelWidth" prop="coefficient">
					<el-input v-model="form.coefficient" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
					<el-input v-model="form.remark" autocomplete="off" type="textarea" :rows="3" maxlength="100" :disabled="true">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleHandle = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('form',)">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		businessExamineList,
		businessExamineNew,
		businessExamineDelete,
		businessExaminePut,
		businessExamineGet
	} from '../../api/assessment.js'
	export default {
		components: {},
		data() {
			return {
				dialogFormVisibleHandle:false,
				title:'新增考核系数',
				btnName:'保存',
				disabled:false,
				typePop:1,
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					coefficient: '',
					level: '',
					remark: ''
				},
				valuePage: false,
				rules: {
					coefficient: [{
						required: true,
						message: '请输入等级',
						trigger: 'blur'
					}],
					level: [{
						required: true,
						message: '请输入考核系数',
						trigger: 'blur'
					}],
					remark: [{
						required: false,
						message: '请填写活动形式',
						trigger: 'blur'
					}]
				},
				formLabelWidth: '120px',
				tableData: []
			}
		},
		created() {
			this.businessExamineListPost()
		},
		methods: {
			submitForm(formName) {
				
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(this.typePop ==1){
							this.businessExamineNewPost(this.form)
						}else if(this.typePop ==2){
							this.businessExaminePut()
						}else if(this.typePop ==3){
							this.dialogFormVisible = false
							this.btnName='保存',
							this.disabled = false
							
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			close(){
				this.dialogFormVisible = false
				this.form.coefficient= ''
				this.form.level= ''
				this.form.remark= ''
			},
			//查看
			handleClick(row){
				// this.disabled = true
				// this.title = '查看考核系数'
				// this.btnName = '确定'
				// this.typePop =3
				this.dialogFormVisibleHandle = true
				businessExamineGet(row.id).then(res =>{
					console.log('res ',res );
					// this.dialogFormVisible =true
					this.form.coefficient=res.data.coefficient
					this.form.level=res.data.level
					this.form.remark=res.data.remark
					// this.typePop =1
					
				})
			},
			//编辑
			editorClick(row){
				this.title = '编辑考核系数'
				this.dialogFormVisible = true
				this.typePop = 2
				this.form.coefficient=row.coefficient
				this.form.level=row.level
				this.form.remark=row.remark
				this.form.id=row.id
			},
			businessExaminePut(){
				businessExaminePut(this.form).then(res =>{
					this.$message({
						type: 'success',
						message:res.msg
					});
					this.form.coefficient= ''
					this.form.level= ''
					this.form.remark= ''
					this.dialogFormVisible =false
					this.businessExamineListPost()
				})
			},
				
			//删除
			deleteClick(row) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					businessExamineDelete(row.id).then(res => {
						this.$message({
							type: 'success',
							message: res.msg
						});
						this.businessExamineListPost()
					})
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消删除'
					// });
				});
				console.log("row: ", row);
				
			},
			//删除
			businessExamineDelete() {
				businessExamineDelete().then(res => {
					this.$message({
						message: '新增成功',
						type: 'success'
					});
				})
			},
			//新增考核列表
			businessExamineNewPost(data) {
				businessExamineNew(data).then(res => {
					this.$message({
						message: '新增成功',
						type: 'success'
					});
					this.dialogFormVisible = false
					this.form.coefficient= ''
					this.form.level= ''
					this.form.remark= ''
					this.businessExamineListPost()
				})
			},
			//考核列表
			businessExamineListPost() {
				businessExamineList({
					page: 1,
					pageSize: 10,
					data: {}
				}).then(res => {
					// console.log("res.rows: ",res.rows);
					this.tableData = res.rows
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
</style>

